<template>
  <div>
    <!-- main -->
    <div class="main">
      <div class="main-search">
        <el-form  class="layui-form search-single">
          <el-input placeholder="请输入内容" @blur="searchNews" v-model="listQuery.params.title" >
            <span slot="append" @click="searchNews" style="background-color: #01CB94;cursor:pointer">搜索</span>
          </el-input>
        </el-form>
      </div>

      <div class="main-container" style="margin-left: 0px">
        <div class="container">
          <div class="location clearfix">

          </div>

          <div class="list-news">
            <data-grid
              :options="options"
              :list-query="listQuery"
              ref="pagingTable"
            >
              <template slot="list-item" slot-scope="scope">
                <router-link :to="{ name: 'newsView', params: { newsId: scope.data.id }}" class="item">
              <div class="thumbnail">
                <div class="content" >
                  <el-image v-if="scope.data.imgUrl!=null && scope.data.imgUrl!=''" :src="scope.data.imgUrl" fit="fill" style="height: 200px;width: 100%" />
                  <el-image v-else :src="require('@/assets/web/images/course_default.jpg')" fit="fill" style="height: 200px;width: 100%" />
                </div>
              </div>
              <div class="title">{{scope.data.title}}</div>
              <div class="operate clearfix">
                <div class="fl summary">{{scope.data.summary}}……</div>
                <i class="fr iconfont icon-earth"></i>
              </div>
                </router-link>
              </template>
            </data-grid>
          </div>
        </div>
      </div>
    </div>
    <!-- main end -->


  </div>

</template>

<script>

import DataGrid from '@/components/DataGrid' // 权限判断函数
export default {
  name: 'newsList',
  components: { DataGrid },
  props: {

  },
  data() {
    return {
      searchKey:'',
      listQuery: {
        current: 1,
        size: 10,
        params: {
          title:''
        }
      },

      options: {
        // 列表请求URL
        listUrl: '/api/news/news/webPaging'
      },
      data: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      }

    }
  },

  created() {

  },
  methods: {
    searchNews(){
      this.$refs.pagingTable.getList()
    }
  }
}
</script>

<style>



.el-input-group__append, .el-input-group__prepend {
  background-color: #01CB94;
  color: #fff;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #01CB94;
  border-radius: 0px;
  padding: 0 20px;
  width: 1px;
  white-space: nowrap;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #01CB94;
  color: #fff;
}
</style>

